<style scoped>
  .switch {
    position: relative;
    width: 2.1rem;
    height: 1.05rem;
    background-color: #ccc;
    border-radius: .5rem;
  }

  .circle {
    position: absolute;
    width: .9rem;
    height: .9rem;
    background-color: #fff;
    border-radius: 50%;
    margin-top: .075rem;
    margin-left: .075rem;
  }

  .switchActive {
    background-color: #0094db;
  }
</style>


<!--动画-->
<style scoped>
  .moveSwitch {
    -webkit-transform: translateX(1.05rem);
  }
</style>


<template>
    <div class="box">
      <div class="switch" @click="toggle" :class="{switchActive:value}">
        <div class="circle" :class="{moveSwitch:value}"></div>
      </div>
    </div>
</template>

<script>
  import headNav from './head.vue'
  import $ from 'webpack-zepto'
  export default{
    components: {headNav},
    data(){
      return {}
    },
    props: {
      value: {default: false}
    },
    mounted(){

    },
    methods: {
      toggle(){
//        console.log(this.value);
//        this.value = !this.value;
        this.$emit('toggle')
      },
      headBack(){
        this.$router.go(-1);
      }
    }

  }


</script>
